<!--
 * @Author: your name
 * @Date: 2021-03-02 16:16:17
 * @LastEditTime: 2021-04-09 15:15:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \qdBillingSystem\src\components\cgjl.vue
-->
<template>
  <div class="context">
    <el-drawer
      :show-close="false"
      append-to-body
      size="70%"
      :visible.sync="cg"
      direction="rtl"
      :withHeader="false"
    >
      <div class="drawerContext" v-if="detailObj">
        <div class="title">
          <i
            class="el-icon-close"
            @click="cg = false"
            style="margin-left: 10px; cursor: pointer"
          ></i
          ><span style="margin-left: 20px">采购单详情</span>
        </div>
        <div class="context">
          创建时间：{{ $moment(detailObj.createdTime) }}
          <el-table :data="detailObj.itemVOs">
            <el-table-column
              label="序号"
              type="index"
              width="55"
            ></el-table-column>
            <el-table-column label="创建时间" min-width="100">
              <template slot-scope="scope">{{
                $moment(scope.row.createdTime)
              }}</template>
            </el-table-column>
            <el-table-column
              prop="supplierName"
              label="供应商"
            ></el-table-column>
            <el-table-column
              prop="createdName"
              label="创建人"
            ></el-table-column>
            <el-table-column
              prop="purchaseOrgName"
              label="采购部门"
            ></el-table-column>
            <el-table-column label="采购仓库">
              <template slot-scope="scope">
                {{ mapWarName(scope.row.depotVos) }}
              </template>
            </el-table-column>
            <el-table-column label="商品类型">
              <template slot-scope="scope">
                {{ ["商品", "赠品"][scope.row.purchaseProdType - 1] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="purchaseProdName"
              label="采购商品"
            ></el-table-column>
            <el-table-column label="采购图片">
              <template slot-scope="scope" min-width="60">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="查看更多"
                  placement="top"
                >
                  <el-image
                    v-image-preview
                    v-if="scope.row.purchaseImage"
                    :src="ImgHttps + scope.row.purchaseImage.split(',')[0]"
                    @click="
                      (imageSrc = scope.row.purchaseImage),
                        (dialogVisible = true)
                    "
                    style="width: 60px; height: 60px; cursor: pointer"
                  ></el-image>
                  <span v-else>/</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="purchaseProdBrandName"
              label="采购品牌"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdQuantity"
              label="采购数量"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdSpecificationName"
              label="采购规格"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdPrice"
              label="采购单价"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdAmount"
              label="采购金额"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :show-close="false"
      append-to-body
      size="70%"
      :visible.sync="cgrk"
      direction="rtl"
      :withHeader="false"
    >
      <div class="drawerContext" v-if="detailObj">
        <div class="title">
          <i
            class="el-icon-close"
            @click="cgrk = false"
            style="margin-left: 10px; cursor: pointer"
          ></i
          ><span style="margin-left: 20px">采购入库单详情</span>
        </div>
        <div class="context">
          创建时间：{{ $moment(detailObj.createdTime) }}
          <el-table :data="detailObj">
            <el-table-column
              label="序号"
              type="index"
              width="55"
            ></el-table-column>
            <el-table-column
              prop="supplierName"
              label="供应商"
            ></el-table-column>
            <el-table-column
              prop="createdName"
              label="创建人"
            ></el-table-column>
            <el-table-column
              prop="inDepotOrgName"
              label="入库部门"
            ></el-table-column>
            <el-table-column label="入库仓库">
              <template slot-scope="scope">
                {{ mapWarName(scope.row.orderPurchaseInOrderProdDepotList) }}
              </template>
            </el-table-column>
            <el-table-column label="商品类型">
              <template slot-scope="scope">
                {{ ["商品", "赠品"][Number(scope.row.inDepotProdType) - 1] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="inDepotProdName"
              label="入库商品"
            ></el-table-column>
            <el-table-column label="商品图片">
              <template slot-scope="scope" min-width="60">
                <!-- <el-tooltip
                  class="item"
                  effect="dark"
                  content="查看更多"
                  placement="top"
                > -->
                <el-image
                  :src="ImgHttps + scope.row.inDepotProdImage.split(',')[0]"
                  @click="
                    (imageSrc = scope.row.inDepotProdImage),
                      (dialogVisible = true)
                  "
                  style="width: 60px; height: 60px; cursor: pointer"
                ></el-image>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="inDepotProdBrandName"
              label="入库品牌"
            ></el-table-column>
            <el-table-column
              prop="inDepotProdQuantity"
              label="入库数量"
            ></el-table-column>
            <el-table-column
              prop="inDepotProdSpecificationName"
              label="入库规格"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdPrice"
              label="入库单价"
            ></el-table-column>
            <el-table-column
              prop="purchaseProdAmount"
              label="入库金额"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :show-close="false"
      append-to-body
      size="70%"
      :visible.sync="cgth"
      direction="rtl"
      :withHeader="false"
    >
      <div class="drawerContext" v-if="detailObj">
        <div class="title">
          <i
            class="el-icon-close"
            @click="cgth = false"
            style="margin-left: 10px; cursor: pointer"
          ></i
          ><span style="margin-left: 20px">退货详情</span>
        </div>
        <div class="context">
          <p style="margin-left: 10px">
            创建时间：{{ $moment(detailObj.createdTime) }}
          </p>
          <el-table :data="detailObj.items">
            <el-table-column
              label="序号"
              type="index"
              width="55"
            ></el-table-column>
            <el-table-column
              prop="supplierName"
              label="供应商"
            ></el-table-column>
            <el-table-column
              prop="createdName"
              label="创建人"
            ></el-table-column>
            <el-table-column
              prop="returnOrgName"
              label="退货部门"
            ></el-table-column>
            <el-table-column label="退货仓库">
              <template slot-scope="scope">
                <span v-for="items in scope.row.depotVOS" :key="items">{{
                  items.returnDepotName
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品类型">
              <template slot-scope="scope">
                {{ ["商品", "赠品"][scope.row.returnProdType - 1] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="returnProdName"
              label="退货商品"
            ></el-table-column>
            <el-table-column label="商品图片">
              <template slot-scope="scope" min-width="60">
                <el-image
                  :src="ImgHttps + scope.row.returnProdImage"
                  style="width: 60px; height: 60px; cursor: pointer"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="returnProdBrandName"
              label="退货品牌"
            ></el-table-column>
            <el-table-column
              prop="returnProdQuantity"
              label="退货数量"
            ></el-table-column>
            <el-table-column
              prop="returnProdSpecificationName"
              label="退货规格"
            ></el-table-column>
            <el-table-column
              prop="returnProdPrice"
              label="退货单价"
            ></el-table-column>
            <el-table-column
              prop="returnProdAmount"
              label="退货金额"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :show-close="false"
      append-to-body
      size="70%"
      :visible.sync="cghh"
      direction="rtl"
      :withHeader="false"
    >
      <div class="drawerContext" v-if="detailObj.orderPurchaseExchangeOrderBase">
        <div class="title">
          <i
            class="el-icon-close"
            @click="cghh = false"
            style="margin-left: 10px; cursor: pointer"
          ></i
          ><span style="margin-left: 20px">采购换货详情</span>
        </div>
        <div class="context">
          创建时间：{{
            $moment(detailObj.orderPurchaseExchangeOrderBase.createdTime)
          }}
          <el-table :data="detailObj.orderPurchaseExchangeOrderItem">
            <el-table-column
              label="序号"
              type="index"
              width="55"
            ></el-table-column>
            <el-table-column
              prop="supplierName"
              label="供应商"
            ></el-table-column>
            <el-table-column
              prop="createdName"
              label="创建人"
            ></el-table-column>
            <el-table-column
              prop="exchangeOrgName"
              label="采购部门"
            ></el-table-column>
            <el-table-column label="采购仓库">
              <template slot-scope="scope">
                {{
                  mapWarName(scope.row.orderPurchaseExchangeOrderProdDepotList)
                }}
              </template>
            </el-table-column>
            <el-table-column label="商品类型">
              <template slot-scope="scope">
                {{ ["商品", "赠品"][Number(scope.row.exchangeProdType) - 1] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="exchangeProdName"
              min-width="200"
              show-overflow-tooltip
              label="采购商品"
            ></el-table-column>
            <el-table-column label="商品图片">
              <template slot-scope="scope" min-width="60">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="查看更多"
                  placement="top"
                >
                  <el-image
                    :src="ImgHttps + scope.row.exchangeProdImage.split(',')[0]"
                    @click="
                      (imageSrc = scope.row.exchangeProdImage),
                        (dialogVisible = true)
                    "
                    style="width: 60px; height: 60px; cursor: pointer"
                  ></el-image>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="exchangeProdBrandName"
              label="采购品牌"
            ></el-table-column>
            <el-table-column
              prop="exchangeProdQuantity"
              label="采购数量"
            ></el-table-column>
            <el-table-column
              prop="exchangeProdSpecificationName"
              label="采购规格"
            ></el-table-column>
            <el-table-column
              prop="exchangeProdPrice"
              label="采购单价"
            ></el-table-column>
            <el-table-column
              prop="exchangeProdAmount"
              label="采购金额"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cg: false,
      cgrk: false,
      cghh: false,
      cgth: false,
      detailObj: {},
      type:0
    };
  },
  methods: {
    mapWarName(e) {
      let str = "";
      e.forEach((res, index) => {
        let str1 = "";
        if(this.type == 1){
          str1 = res.purchaseDepotName;
        }else if(this.type == 2){
          str1 = res.inDepotName;
        }else if(this.type == 3){
          str1 = res.exchangeDepotName;
        }else if(this.type == 4){
          str1 = res.returnDepotName;
        }


        if (index != e.length - 1) {
          str += str1 + ",";
        } else {
          str += str1;
        }
      });
      return str;
    },
    rowClick(id, t) {
      if (t == 1) {
        this.axios
          .get(
            "order/v1/purchase/order/purchaseOrderDetails?purchaseOrderNo=" + id
          )
          .then((res) => {
            if (res.code == 0) {
              this.detailObj = res.data;
              this.cg = true;
            } else {
              this.$message.error(res.message);
            }
          });
      } else if (t == 2) {
        this.axios
          .post("order/v1/purchase/in/order/item/list", {
            request: {
              purchaseInOrderNo: id,
            },
          })
          .then((res) => {
            if (res.code == 0) {
              this.detailObj = res.data.orderPurchaseInOrderItemList;
              this.cgrk = true;
            } else {
              this.$message.error(res.message);
            }
          });
      } else if (t == 3) {
        this.axios
          .post("order/v1/purchase/exchange/order/item/list", {
            request: {
              purchaseExchangeOrderNo: id,
            },
          })
          .then((res) => {
            if (res.code == 0) {
              this.detailObj = res.data;
              this.cghh = true;
            } else {
              this.$message.error(res.message);
            }
          });
      } else if (t == 4) {
        this.axios
          .get(
            "/order/v1/purchase/return/order/detailsByPurchaseReturnOrderNo?purchaseReturnOrderNo=" +
              id
          )
          .then((res) => {
            if (res.code == 0) {
              this.detailObj = res.data;
              this.cgth = true;
            } else {
              this.$message.error(res.message);
            }
          });
      }

      this.type = t;
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-drawer:focus {
  outline: none;
}
/deep/.el-drawer__body {
  overflow-y: auto;
}
</style>
